<template>
  <ElCard class="member-new">
    <div class="item">
      <span class="must-check">*</span> 宝宝姓名：<ElInput
        v-model="child_name"
        class="member-input"
        placeholder="请输入宝宝姓名"
      ></ElInput>
    </div>
    <div class="item">
      <span class="must-check">*</span> 宝宝生日：<ElDatePicker
        v-model="birthday"
        class="birthday"
        type="date"
        placeholder="请输入宝宝生日"
        :picker-options="pickOptions"
      >
      </ElDatePicker>
    </div>
    <div class="item">
      <span class="must-check">*</span> 宝宝性别：<ElRadioGroup
        v-model="sex"
        class="baby-sex"
        ><ElRadioButton label="1">男</ElRadioButton
        ><ElRadioButton label="2">女</ElRadioButton></ElRadioGroup
      >
    </div>
    <div class="item">
      <span class="must-check no-content">*</span> 家长手机：<ElInput
        v-model="tel"
        class="member-input"
        type="tel"
        placeholder="请输入家长手机号"
      ></ElInput>
    </div>
    <div class="item">
      <span class="must-check no-content">*</span> 客户来源：<ElSelect
        v-model="source_id"
        class="member-input"
        placeholder="请选择客户来源"
      >
        <ElOption
          v-for="s in sourceList"
          :key="s.id"
          :value="s.id"
          :label="s.source_name"
        />
      </ElSelect>

      <ElButton
        round
        plain
        type="primary"
        class="member-new-refer-button"
        @click="addSource"
        >添加来源</ElButton
      >
    </div>
    <div class="tips">
      注：家长如需接收宝宝咨询详情，请使用微信扫门店二维码关注，并且绑定手机号即可。
    </div>
    <div class="member-new-button">
      <ElButton round @click="submitMember">提交</ElButton>
    </div>
    <ElDialog
      :class="s.sourceDialog"
      :visible.sync="dialogVisible"
      width="420px"
      @close="fetchSource"
    >
      <SourceManage />
      <div slot="title" :class="s.dialogTitle">
        <span :class="s.itemIcon"></span>添加来源
      </div>
    </ElDialog>
  </ElCard>
</template>

<script>
import SourceManage from '@/components/member/SourceManage.vue';
import {http, catchAppError} from '@/util';
import url from '@/config';
import {menusNavigation} from '@/store';
import toast from '@/toast';

export default {
  name: 'MemberNew',
  components: {SourceManage},
  data() {
    return {
      sourceList: [],
      dialogVisible: false,
      child_name: '',
      birthday: '',
      sex: '',
      tel: '',
      source_id: '',
      regTel: /^1\d{10}$/,
      pickOptions: {
        disabledDate(time) {
          return (
            time.getTime() > Date.now() ||
            time.getTime() < Date.now() - 1000 * 60 * 60 * 24 * 365 * 18
          );
        }
      }
    };
  },
  beforeMount() {
    this.fetchSource();
  },
  methods: {
    addSource() {
      this.dialogVisible = true;
    },
    clearData() {
      this.child_name = '';
      this.birthday = '';
      this.sex = '';
      this.tel = '';
      this.source_id = '';
    },
    fetchSource() {
      http
        .get(url.getSource)
        .then(res => {
          this.sourceList = res;
        })
        .catch(catchAppError);
    },
    submitMember() {
      const allIsCheck = this.child_name && this.birthday && this.sex;
      if (!allIsCheck) {
        toast('必填项不能为空!');
      }
      if (allIsCheck) {
        if (this.tel && !this.regTel.test(this.tel)) {
          toast('手机号输入错误');
          return;
        }
        http
          .post(url.addMember, {
            child_name: this.child_name,
            birthday: this.birthday,
            sex: this.sex,
            tel: this.tel,
            source_id: this.source_id
          })
          .then(() => {
            toast('新增会员信息成功');
            this.clearData();
            menusNavigation.navTab('MemberList', '0');
          })
          .catch(catchAppError);
      }
    }
  }
};
</script>

<style lang="scss">
@import '@/assets/css/util.scss';
.member-new {
  font-size: 16px;
  .item {
    margin-bottom: 20px;
    .el-input {
      width: 230px;
      .el-input__inner {
        padding: 10px 15px;
        font-size: 1px;
      }
    }
    .birthday {
      .el-input__prefix {
        display: none;
      }
    }
    .member-new-refer-button {
      margin-left: 15px;
    }
    .el-radio-button {
      margin-right: 25px;
      .el-radio-button__inner {
        border-left: 1px solid #4b90ff;
        border: 1px solid #4b90ff;
        color: #4b90ff;
        border-radius: 20px;
        padding: 7px 15px;
        font-size: 12px;
      }
      .el-radio-button__orig-radio:checked + .el-radio-button__inner {
        background-color: #ffb03e;
        border-left: 1px solid #ffb03e;
        border: 1px solid #ffb03e;
        box-shadow: -1px 0 0 0 #ffb03e;
        color: #fff;
      }
    }
  }
  .tips {
    color: #ffb03e;
    font-size: 16px;
    font-weight: bold;
  }
  .member-new-button {
    margin-top: 55px;
    text-align: center;
    .el-button {
      width: 230px;
      padding: 14px 0;
      font-size: 16px;
      background-color: #ffb03e;
      border-color: #ffb03e;
      color: #fff;
    }
  }
}
</style>

<style lang="scss" module="s">
@import '@/assets/css/dialog.scss';
</style>
